<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--
    水平居中：
    行内标签  行内－块级标签  text-align  center;
    块级标签  margin: 0 auto;

    垂直居中
    line-height == height  (让行高＝＝标签的高度)
    -->
    <style>
        div{
            background-color: red;
            width: 400px;
            height: 250px;
            line-height: 250px;
            /*水平居中*/
            text-align: center;
        }
        span{
            background-color: green;
        }

        p{
            background-color: goldenrod;
            width: 200px;
            /*height: 40px;*/
            /*line-height: 40px;*/
            /*margin-right: auto;*/
            /*margin-left: auto;*/
            margin: 0 auto;
        }

    </style>
</head>
<body>

<div>
    <!--<span>行内标签</span>-->
    <!--<button>行内－块级标签</button>-->
    <p>块级标签</p>
</div>
</body>
</html>